<%@ page language="java" import="com.gin.util.*" pageEncoding="UTF-8" %>
<%@ page language="java" import="java.util.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ssm" uri="http://ssm" %>
<%@ include file="/head.jsp" %>


<script src="js/jquery.validate.js"></script>
<script>
    window.searchSelectUrl = "common.do?ac=selectUpdateSearch";
    window.selectUpdateUrl = "common.do?ac=tableAjax";
</script>
<script src="js/selectUpdate.js"></script>
<%
    HashMap readMap = (HashMap) Query.make("shijuan").where("id", request.getParameter("id")).find();
    request.setAttribute("readMap", readMap);
    List<String> shitikuid = Query.make("shiti").where("shijuanid", request.getParameter("id")).getCol("shiti");
%>
<div style="padding: 10px" class="admin-content">
    <div class="container">
        <!-- 使用bootstrap css框架，container定宽，并剧中 https://v3.bootcss.com/css/#overview-container -->

        <div class="panel panel-default">
            <div class="panel-heading">自动组卷:</div>
            <div class="panel-body">
                <div class="pa10 bg-warning form-inline">

                    题型：
                    <select class="form-control class_leixing_search15" data-value="" id="leixing_search" name="leixing_search">
                        <option value="">请选择</option>
                        <option value="单选题">单选题</option>
                        <option value="多选题">多选题</option>
                        <option value="判断题">判断题</option>

                    </select>
                    难度：
                    <select class="form-control class_nandu_search16" data-value="" id="nandu_search" name="nandu_search">
                        <option value="">请选择</option>
                        <option value="难">难</option>
                        <option value="中">中</option>
                        <option value="易">易</option>
                    </select>


                    试题数量：
                    <input type="text" class="form-control" name="limit" id="limit" value="10">
                    <button type="button" class="btn btn-default" onclick="shiti_select_update()">组卷</button>
                    <script>
                        var ids = [<%=StringUtil.join("," , shitikuid)%>];  //添加

                        function shiti_select_update() {
                            var keyword = $("#shiti_keyword").val();
                            var where = {};

                            where.suoshukemu = '${readMap.suoshukemu}';

                            where.limit = $('#limit').val() == '' ? 100 : $('#limit').val();//添加
                            if (ids.length > 0) where.id = ["not in", ids.join(",")];//添加

                            if ($("#leixing_search").val() != "") where.leixing = $("#leixing_search").val();
                            if ($("#tixing_search").val() != "") where.tixing = $("#tixing_search").val();
                            if ($("#nandu_search").val() != "") where.nandu = $("#nandu_search").val();


                            searchSelect("shiti", "tiku", keyword, where, "timubianhao,biaoti,leixing,nandu,daan".split(","), "".split(","), searchCallback);
                        }

                        function searchCallback(list) {

                            if (list.length > 0) {
                                var obj = list.shift();
                                $('#shiti').val(obj.id);

                                setFieldData('timubianhao,biaoti,leixing,nandu,daan', obj);
                                var formdata = $('#form1').serialize();
                                $.post($('#form1').attr('action'), formdata, function (res) {
                                    $('#jieguo').append('<div>已加入试题：' + obj.biaoti + '</div>');
                                    ids.push(obj.id);
                                    searchCallback(list);
                                });
                            } else {
                                $('#jieguo').append('<div>没有更多试题了</div>');
                            }
                        }
                    </script>

                    <div id="jieguo" class="">

                    </div>


                </div>

                <form action="shiti.do?ac=insert" method="post" name="form1" id="form1">
                    <!-- form 标签开始 -->

                    <input type="hidden" name="shijuanid" value="${param.id}" />
                    <div class="form-group" style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">试卷编号</label>
                            <div class="col-sm-10">
                                ${readMap.shijuanbianhao}<input type="hidden" id="shijuanbianhao" name="shijuanbianhao" value="${Info.html(readMap.shijuanbianhao)}" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group"  style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">试卷名称</label>
                            <div class="col-sm-10">
                                ${readMap.shijuanmingcheng}<input type="hidden" id="shijuanmingcheng" name="shijuanmingcheng" value="${Info.html(readMap.shijuanmingcheng)}" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">所属科目</label>
                            <div class="col-sm-10">
                                <ssm:sql var="mapkemu10" type="find">SELECT kemumingcheng,id FROM kemu where id='${readMap.suoshukemu}'</ssm:sql>${mapkemu10.kemumingcheng}<input
                                    type="hidden"
                                    id="suoshukemu"
                                    name="suoshukemu"
                                    value="${Info.html(readMap.suoshukemu)}"
                            />
                            </div>
                        </div>
                    </div>
                    <div class="form-group"style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">课程名称</label>
                            <div class="col-sm-10">
                                ${readMap.kechengmingcheng}<input type="hidden" id="kechengmingcheng" name="kechengmingcheng" value="${Info.html(readMap.kechengmingcheng)}" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group"style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">章节名称</label>
                            <div class="col-sm-10">
                                ${readMap.zhangjiemingcheng}<input type="hidden" id="zhangjiemingcheng" name="zhangjiemingcheng" value="${Info.html(readMap.zhangjiemingcheng)}" />
                            </div>
                        </div>
                    </div>

                    <div class="form-group" style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">试题</label>
                            <div class="col-sm-10">
                                <div class="form-inline">
                                    <select
                                            class="form-control"
                                            data-fields="timubianhao,biaoti,leixing,nandu,daan"
                                            id="shiti"
                                            name="shiti"
                                            onchange="getAjaxData('tiku',this,this.value)"
                                    >
                                        <option value="">请选择试题</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">题目编号</label>
                            <div class="col-sm-10">
                                <input
                                        type="text"
                                        class="form-control select-update"
                                        placeholder="输入题目编号"
                                        style="width: 150px"
                                        id="timubianhao"
                                        name="timubianhao"
                                        value=""
                                />
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">题目</label>
                            <div class="col-sm-10">
                                <textarea style="width: 80%; height: 120px" class="form-control select-update" placeholder="输入题目" id="biaoti" name="biaoti"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">类型</label>
                            <div class="col-sm-10">
                                <select class="form-control select-update" data-value="" id="leixing" name="leixing" style="width: 250px">
                                    <option value="单选题">单选题</option>
                                    <option value="多选题">多选题</option>
                                    <option value="判断题">判断题</option>

                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">难度</label>
                            <div class="col-sm-10">
                                <select class="form-control select-update" data-value="" id="nandu" name="nandu" style="width: 250px">
                                    <option value="难">难</option>
                                    <option value="中">中</option>
                                    <option value="易">易</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">答案</label>
                            <div class="col-sm-10">
                                <div id="TypeFieldabc">
                                    <div style="border: 1px solid #ededed; border-radius: 5px; padding: 10px; background: #F2F2F2">
                                        <table class="table table-hover">
                                            <thead>
                                            <tr>
                                                <th width="80"> </th>
                                                <th>答案</th>
                                                <!--<th width="80">跳转序号</th>-->
                                                <th width="60">得分</th>
                                            </tr>
                                            </thead>
                                            <tbody id="field_box"></tbody>
                                        </table>
                                    </div>
                                    <button type="button" class="btn btn-default btn-sm" id="add_btn">增加答案</button>
                                </div>
                                <input type="hidden" id="daan" name="daan" />
                                <script>
                                    function selectType(obj) {
                                        var v = $(obj).val();
                                        if (v == "单选题" || v == "多选题") {
                                            $("#TypeFieldabc").show();
                                        } else {
                                            $("#TypeFieldabc").hide();
                                        }
                                    }

                                    function updateZimu() {
                                        var zimu = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                                        var index = $("#field_box")
                                            .find("tr")
                                            .each(function (index) {
                                                $(this).find("td:eq(0)").find("input").val(zimu.substr(index, 1));
                                            });
                                    }

                                    function addFieldItem(wx) {
                                        wx = wx || {};
                                        var str = [];
                                        str.push('<tr><td align="center" valign="middle">');
                                        str.push('<input type="text" readonly="readonly" style="width: 40px;" data-id="zimu" class="form-control" value="" />');
                                        str.push("</td><td>");
                                        str.push(
                                            '<input type="text" style="width:100%" onblur="updateData()" data-id="title" class="form-control" value="' + (wx.title || "") + '" />'
                                        );
                                        str.push("</td><td>");

                                        str.push(
                                            '<input type="number" step="1" style="width: 60px;" onblur="updateData()" data-id="point" class="form-control" value="' +
                                            (wx.point || "0") +
                                            '" />'
                                        );
                                        str.push("</td><td>");

                                        str.push('<button onclick="delItem(this);" type="button" class="btn btn-default">删除</button>');
                                        str.push("</td></tr>");
                                        var html = str.join("");
                                        $("#field_box").append(html);
                                        updateZimu();
                                    }

                                    function delItem(obj) {
                                        if (confirm("此操作将不可恢复，您确定删除？")) {
                                            $(obj).parent().parent().remove();
                                        }
                                        updateZimu();
                                    }
                                    $(function () {
                                        var __fields = [];
                                        if (__fields.length > 0) {
                                            $.each(__fields, function () {
                                                addFieldItem(this);
                                            });
                                        } else {
                                            addFieldItem();
                                        }
                                    });

                                    function updateData() {
                                        var result = [];
                                        $("#field_box")
                                            .find("tr")
                                            .each(function () {
                                                var obj = {};
                                                $(this)
                                                    .find("[data-id]")
                                                    .each(function () {
                                                        if ($(this).attr("type") == "checkbox") {
                                                            obj[$(this).attr("data-id")] = $(this).attr("checked");
                                                        } else {
                                                            obj[$(this).attr("data-id")] = $.trim($(this).val());
                                                        }
                                                    });
                                                if (obj.title != "" && obj.point != "") {
                                                    result.push(obj);
                                                }
                                            });
                                        $("#daan").val(JSON.stringify(result));
                                    }

                                    $("#TypeFieldabc").on("input,checkbox", "blur,change", function (e) {
                                        console.log(e);
                                    });

                                    $("#add_btn").click(addFieldItem);
                                    $("#form1").submit(function () {
                                        updateData();
                                        return true;
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs">发布人</label>
                            <div class="col-sm-10">
                                <input
                                        type="text"
                                        class="form-control"
                                        placeholder="输入发布人"
                                        style="width: 150px"
                                        readonly="readonly"
                                        id="faburen"
                                        name="faburen"
                                        value="${sessionScope.username}"
                                />
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="display: none">
                        <div class="row">
                            <label style="text-align: right" class="col-sm-2 hiddex-xs"> </label>
                            <div class="col-sm-10">
                                <input name="referer" id="referers" class="referers" value="<%=request.getHeader("referer") %>" type="hidden" />
                                <script>
                                    $(function () {
                                        $("input.referers").val(document.referrer);
                                    });
                                </script>

                                <button type="submit" class="btn btn-primary" name="Submit">提交</button>
                                <button type="reset" class="btn btn-default" name="Submit2">重置</button>
                            </div>
                        </div>
                    </div>

                    <!--form标签结束-->
                </form>
            </div>
        </div>

        <!-- container定宽，并剧中结束 -->
    </div>

    <script>
        $(function () {
            $("#form1").validate();
        });
    </script>
</div>
<%@ include file="/foot.jsp" %>

